<template>
	<view class="switch-box">
		<!-- 仿爱奇艺switch -->
		<view v-if="Template=='fiqy'"
		class="switch-type">
			<image v-if="checked||checkeds"
			class="Image"
			:src="switchImg.fiqy.show"
			mode="heightFix"
			></image>
			<image v-else
			class="Image"
			:src="switchImg.fiqy.hied"
			mode="heightFix"
			></image>
		</view>
		<!-- 仿优酷switch -->
		<view v-if="Template=='fyk'"
		class="switch-type">
			<image v-if="checked||checkeds"
			class="Image"
			:src="switchImg.fyk.show"
			mode="heightFix"
			></image>
			<image v-else
			class="Image"
			:src="switchImg.fyk.hied"
			mode="heightFix"
			></image>
		</view>
		
		<!-- checked 改变时触发 change 事件，event.detail={ value:checked} -->
		<switch class="switch"
		style="opacity: 0;transform:scale(0.7);"
		:checked="checked" :disabled="disabled"
		:type="type" :color="Color"
		@change="change"/>
	</view>
</template>

<script>
	export default {
		name:"FatFatMeng-switch",
		props:{
			// 是否选中
			checked:{
				type:Boolean,
				default:false
			},
			// 是否禁用
			disabled:{
				type:Boolean,
				default:false
			},
			// 样式，有效值：switch, checkbox
			type:{
				type:String,
				default:'switch'
			},
			Color:{
				type:String,
				default:'#00ccd8'
			},
			// 模板皮肤
			Template:{
				type:String,
				default:'fiqy'
			},
			// switch的宽度
			switchWidht:{
				type:Number,
				default:36.5//px单位
			}
		},
		data() {
			return {
				switchImg:{
					'fiqy':{
						hied:'/uni_modules/FatFatMeng-VideoPlayer/static/FatFatMeng-VideoPlayer/apps/images-icon/VideoPlayer-fiqy/switch/switch-hied.png',
						show:'/uni_modules/FatFatMeng-VideoPlayer/static/FatFatMeng-VideoPlayer/apps/images-icon/VideoPlayer-fiqy/switch/switch-show.png'
					},
					'fyk':{
						hied:'/uni_modules/FatFatMeng-VideoPlayer/static/FatFatMeng-VideoPlayer/apps/images-icon/VideoPlayer/switch/switch-hied.png',
						show:'/uni_modules/FatFatMeng-VideoPlayer/static/FatFatMeng-VideoPlayer/apps/images-icon/VideoPlayer/switch/switch-show.png'
					}
				},
				checkeds:this.checked,
			};
		},
		methods:{
			// checked 改变时触发 change 事件，event.detail={ value:checked}
			change(event){
				//console.log("开关状态")
				//console.log(event.detail.value)
				let Value = event.detail.value
				this.$emit('change',Value)
				this.checkeds = Value
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 写这个无效APP-PLUS-NVUE，文件后缀是vue，还是会当做vue去编译
	/* #ifndef APP-PLUS-NVUE */
	view{display: flex;}
	/* #endif */
	
	/* 无法修改关闭时的背景色 */
	.switch{
		left: -10px;
		position: absolute;
		z-index: 99999;
		//background-color: #F0AD4E;
	}
	.switch-box{
		//background-color: #F0AD4E;
		align-items: flex-start;
		justify-content: center;
	}
	.switch-type{
		position: relative;
		align-items: center;
		justify-content: center;
		.Image{
			width: 38.5px;
			height: 22px;
		}
	}
</style>
